<script setup></script>
<template>
    <div class="color-box">
        <span>a</span>
        <span>b</span>
        <span>c</span>
        <span>d</span>
    </div>
</template>
<style scoped lang="scss">
.color-box {
    text-align: center;
}
span {
    font-size: 28px;
    font-weight: 600;
    color: #faebd7;
    animation: colorChange 1s infinite ease-in-out alternate;
}

@for $i from 1 through 8 {
    span:nth-child(#{$i}) {
        animation-delay: ($i - 1) * 0.2s;
    }
}

@keyframes colorChange {
    to {
        color: #ff0266;
    }
}
</style>
